<template>
  <div id="dataexport" style="height: 100%"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'sjdrlEcharts',
  props:{
     barXName:{
       type:Array,
       default:[]
     },
     barValue:{
       type:Array,
       default:[]
     }
  },
  data() {
      return {
      }
  },
  created() {
    console.log(this.barXName,this.barValue);
  },
  mounted() {
    this.$nextTick(() => {
      console.log(this.barXName,this.barValue);
      this.drawLine(this.barXName,this.barValue);
    })
  },
  methods: {
    drawLine(dataName,dataValue) {
      debugger
      var chartDom = document.getElementById('dataexport')
      var myChart = echarts.init(chartDom)
      var option = {
        xAxis: {
          type: 'category',
          data: dataName,
          axisTick: { show: false },
          name: '数量/类型',
          nameLocation: "start",
          nameTextStyle: {
            fontWeight: 'normal',
            align: 'center',
            verticalAlign: 'top',
            lineHeight: 25,
             color:'gray',
             fontSize: 11
          },
          axisLabel:{
            margin: 15
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#cdcdcd9e',
              width: 1,
              type: 'solid',
            },
          },
           axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: 'gray',
            },
            margin: 15
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
            length: 10,
          },
        },
        grid: {
          top: 35,
          bottom: 25,
          left: 45,
          right: 10,
        },
        tooltip: {
          trigger: 'axis',
        },
        series: [
          {
            data: dataValue,
            type: 'bar',
            barWidth:"30%",
            itemStyle: {
                        color:'#2e4cba'
                    }
          },
        ],
      }

      option && myChart.setOption(option)
    },
  },
}
</script>

<style scoped>
</style>